<template>
    <div class="page-banner-list">
      <div class="page-banner-list__header">
        <el-button type="primary" @click="$router.push('/maneger/add')">
          添加管理员
        </el-button>
  
        <el-button type="success" @click="getTableData">
          <el-icon><Refresh /></el-icon>
        </el-button>
      </div>
  
      <el-table :data="displayTableData">
        <!-- <el-table-column type="index" label="序号"  /> -->
        <!-- type设置为selection改为多选框 -->
        <el-table-column type="selection" />
        <el-table-column prop="adminname" label="账号名" />
        <el-table-column prop="role" label="管理员类型">
          <template #default="scope">
            <el-tag :type="scope.row.role === 1 ? 'success' : 'warning'">{{
              scope.row.role === 1 ? "管理员" : "超级管理员"
            }}</el-tag>
          </template>
        </el-table-column>
  
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="info" @click="handleDetail(scope.row.adminname)"
              >查看信息
              </el-button>
  
            <el-button type="info" @click="handleEdit(scope.row)">编辑</el-button>
  
            <el-popconfirm
              title="你确定要删除吗？"
              @confirm="handleDel(scope.row.adminid)"
            >
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
  
        <!-- <template #empty>
            <el-empty description="description" />
          </template> -->
      </el-table>
  
      <!-- =============================抽屉========================= -->
  
      <el-drawer v-model="showDrawer">
        <template #default>
          <el-form :model="formData" :rules="formRules" ref="formRef">
            <el-form-item label="账号" prop="adminname">
              <el-input v-model="formData.adminname"  disabled/>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="formData.password" disabled/>
            </el-form-item>
            <el-form-item label="角色" prop="role">
              <el-select v-model="formData.role">
                <el-option value="2" label="超级管理员"/>
                <el-option value="1" label="管理员"/>
              </el-select>
            </el-form-item>
            <el-form-item label="权限" prop="checkedKeys">
              <!-- tree的勾选数据，需要通过方法去主动获取，不能v-model双向绑定 -->
              <el-tree 
              :data="treeData" 
              :props="defaultProps" 
              show-checkbox 
              ref="treeRef"
              node-key="name"
              default-expand-all
              />
            </el-form-item>
          </el-form>
        </template>
  
        <template #footer>
          <el-button @click="handleEditConfirm" >修改</el-button>
        </template>
      </el-drawer>
  
      <!-- ================================分页器====================== -->
      <div class="page-banner-list__footer">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="tableData.length"
          :page-size="pageSize"
          v-model:current-page="page"
        />
      </div>
    </div>
  </template>
  
  <script>
  import {useManegerStore} from "../../stores/maneger"
  import {routes} from "../../router/index"
  import axios from "axios";
  import {getChildrenByName,isIncludes} from "../../utils/index"
  import {
    getManegerList,
    delManegerList,
    updateManegerList,
  } from "../../api/maneger.js";
  
  const manegerStore=useManegerStore()
  export default {
    data() {
      return {
        tableData: [],
        pageSize: 10,
        page: 1,
        selectIds: [],
        showDrawer: false,
        treeData:[],
        defaultProps:{
          children: "children",
          label: "lable",
        },
        formData: {
          adminname: "",
          password: "",
          role: "",
          //勾选的路由的名字
          checkedKeys: [],
        },
        //表单校验
        formRules:{
          role:[{required:true,message:"请填写"}],
          checkedKeys:[{required:true,message:"请填写"}],
        },
      };
    },
    computed: {
      //展现当前页的数据
      displayTableData() {
        return this.tableData.slice(
          (this.page - 1) * this.pageSize,
          this.page * this.pageSize
        );
      },
    },
    methods: {
      //获取管理员列表
      getTableData() {
        getManegerList()
          .then((response) => {
            console.log(response);
            this.tableData = response.data;
          })
          .catch((err) => {
            console.log(err);
          });
      },
      //处理删除
      handleDel(id) {
        console.log(id);
        delManegerList(id)
          .then((response) => {
            console.log(response);
            this.getTableData();
          })
          .catch((err) => {
            console.log(err);
          });
      },
  
      //查看信息
      handleDetail(name) {
        /* detailManegerList(id).then((res)=>{
          console.log(res);
        }) */
        /* axios.get("http://localhost:3000/item").then((res) => {
          console.log(res);
        }); */
        console.log(name);
        this.$router.push("/maneger/details")
        axios.get("http://localhost:3000/item",{
          params:{
            name:name
          }
        }).then((res) => {
          console.log("name",res.data);
          manegerStore.setDetailsData(res.data)
        });
        
        this.$store.commit("setShowDialog","ture")
      },
  
      //抽屉,处理编辑
      handleEdit(row){
        this.showDrawer=true
        this.formData.adminname=row.adminname
        this.formData.password=row.password
        this.formData.role=row.role+""
        /* console.log(this.formData);
        console.log(this.formData.checkedKeys);
        this.formData.checkedKeys=row.checkedKeys
        console.log(this.formData.checkedKeys); */
        this.$nextTick(()=>{
          let roles=row.checkedKeys
          let arr=roles.filter((role)=>{
            let children=getChildrenByName(routes,role)
            if(children.length){
              return isIncludes(children,roles)
            }else{
              return true
            }
          })
          this.$refs.treeRef.setCheckedKeys(arr)
        })
        //console.log(row);
  
        this.formData.checkedKeys=row.checkedKeys
        
      },
  
      //修改信息
      async handleEditConfirm(){
          try {
              const list1=this.$refs.treeRef.getCheckedKeys()
              const list2=this.$refs.treeRef.getHalfCheckedKeys()
              this.formData.checkedKeys=[...list1,...list2]
              await this.$refs.formRef.validate()
  
              updateManegerList(this.formData).then((data)=>{
                  console.log("修改成功");
                  this.getTableData();
                  this.showDrawer=false
              })
          } catch (error) {
              console.log(error);
          }
      },
    },
    mounted() {
      this.getTableData();
      this.treeData=routes.filter((item)=>{
              return !item.hidden
          })
      
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .page-banner-list {
    height: 100%;
    display: flex;
    flex-direction: column;
    &__header,
    &__footer {
      height: 60px;
      // background: pink;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
    & .el-table {
      flex: 1;
      // overflow-y: auto;
    }
  }
  
  
  </style>
  